<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn"  uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />  
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/FullCalendar/jquery.ui.datepicker-ko.js"></script>
<title>Insert title here</title>
<style type="text/css">
#cl{
	text-align: center;
	margin-bottom: 30px;
}
#cl-top{
	text-align: right;
	width: 92%;
	margin-bottom: 15px;
}
#cl-table{
	display: table;
    margin:0 auto; 
    width: 1000px;
}
.cl-header{
	display: table-row;
	background-color: #eeeeee;
}
.cl-header p{
	display: table-cell;
 	border: 1px solid gray;
 	border-top: 3px solid gray;
 	padding: 3px;
 	text-align: center;
	height: 33px;
	vertical-align: middle;
	font-weight: bold;
}
.cl-header p:FIRST-CHILD{ border-left: 3px solid gray; }
.cl-header p:LAST-CHILD{ border-right: 3px solid gray; }
.cl-body{
	display: table-row;
}
.cl-body p{
	display: table-cell;
 	border: 1px solid gray;
 	padding: 3px;
 	height: 30px;
	vertical-align: middle;
}
.cl-body:LAST-CHILD p{
	border-bottom: 3px solid gray;
}
#cl-body-title{
	text-align: left;
	padding-left: 15px;
}
#cl-bottom{
	text-align: right;
	padding: 10px;
	padding-right: 10%;
}
#cl-body-title a{
	cursor: pointer;
	color: black;
	text-decoration : none;
	font-weight: normal;
}
#cl-body-title a:HOVER {
	color: blue;
	text-decoration: underline;
	font-weight: bold;
}
#cl-paging a{
	cursor: pointer;
	color: black;
	text-decoration : none;
	font-weight: normal;
}
#cl-paging a:HOVER {
	text-decoration: underline;
}
</style>

<script type="text/javascript">

	window.onload = function(){
		var name = document.getElementById("cal_search_name");
		var title = document.getElementById("cal_search_title");
		var start = document.getElementById("cal_date_start");
		var end = document.getElementById("cal_date_end");
		
		$("#cal_search_name").val("${vo.cal_search_name}");
		fnChange();
		if(name.value == "${vo.cal_search_name}"){
			if(name.value == "1"){
				title.value = "${vo.cal_search_title}";
			}else if(name.value == "2"){
				start.value = "${vo.cal_date_start}";
				end.value = "${vo.cal_date_end}";
			}
		}
		
		//ajax로 목록 불러오기
		fnAjaxList('0');
		
		$("#cal_date_start").datepicker({
			buttonImageOnly: true, //이미지만 보이기
			changeMonth: true,
			changeYear: true,
			autoSize: true,
			onClose: function( selectedDate ) {
		        $( "#cal_date_end" ).datepicker( "option", "minDate", selectedDate );
			}
		});
		$("#cal_date_end").datepicker({
			buttonImageOnly: true, //이미지만 보이기
			changeMonth: true,
			changeYear: true,
			autoSize: true,
			onClose: function( selectedDate ) {
		        $( "#cal_date_start" ).datepicker( "option", "maxDate", selectedDate );
			}
		});
		$(".cal_date").datepicker("option", "yy-mm-dd", "2013:2020");
		$(".cal_date").css("width","100px");
		
	};
	
	//검색조건 날짜 값 변환시
	function fnCD(d){
		var sd = document.getElementById("cal_date_start").value;
		var ed = document.getElementById("cal_date_end").value;
		if(d == 'sd' && ed == '' ) document.getElementById("cal_date_end").value = sd;
		else if(d == 'ed' && sd == '') document.getElementById("cal_date_start").value = ed;
	}
	
	//ajax로 목록 불러오기
	function fnAjaxList(flag){
		var search = document.getElementById("search");
		search.ajaxFlag.value = flag;
		$.ajax({
			url : '${pageContext.request.contextPath}/CalList.cal',
			type : 'POST',
			cache : false,
			data : $("#search").serialize(),
			success: function(html){
				$("#cl-list").html(html);
				var frm = document.getElementById("view");
				frm.cal_search_name.value = document.getElementById("cal_search_name").value;
				frm.cal_search_title.value = document.getElementById("cal_search_title").value;
				frm.cal_date_start.value = document.getElementById("cal_date_start").value;
				frm.cal_date_end.value = document.getElementById("cal_date_end").value;
				var listPage = document.getElementById("listPage").value;
				frm.calNowPage.value = listPage;
			}
		});
		
	}
	
	function fnPaging(page){
		var view = document.getElementById("view");
		var search = document.getElementById("search");
		view.calNowPage.value = page;
		search.calNowPage.value = page;
		fnAjaxList('2');
	}
	
	function fnCalWrite() {
		var frm = document.getElementById("view");
		frm.action="${pageContext.request.contextPath}/CalInForm.cal";
		frm.submit();
	}

	function fnCalDel(no){
		var flag = confirm("정말 삭제 하시겠습니까?");
		if(flag){
			location.href='${pageContext.request.contextPath}/CalDel.cal?cal_no='+no;
		}
	}
	
	function fnCalView(no){
		var frm = document.getElementById("view");
		frm.cal_no.value=no;
		frm.action="${pageContext.request.contextPath}/CalView.cal";
		frm.submit();
	}
	
	function fnChange() {
		var name = document.getElementById("cal_search_name");
		var title = document.getElementById("cal_search_title");
		var start = document.getElementById("cal_date_start");
		var end = document.getElementById("cal_date_end");
		title.value = "";
		start.value = "";
		end.value = "";
		if(name.selectedIndex == 0){
			start.style.display = "none";
			end.style.display = "none";
			title.style.display = "";
			$("#cal_search_title").attr("readonly",true);
			$("#cal_search_title").attr("disabled",true);
		}else if(name.selectedIndex == 1){
			start.style.display = "none";
			end.style.display = "none";
			title.style.display = "";
			$("#cal_search_title").attr("readonly",false);
			$("#cal_search_title").attr("disabled",false);
		}else if(name.selectedIndex == 2){
			start.style.display = "";
			end.style.display = "";
			title.style.display = "none";
		}
	}
	function fnKeyEvent() {
		if(event.keyCode == 13){
			fnAjaxList('1');
		}
	}
</script>
</head>
<body>
	<div id="cl">
		<h1>사내 일정 관리</h1>
		<div id="cl-top">
			<input type="button" value="일정 등록" onclick="fnCalWrite()">
		</div>		
		<div id="cl-list"></div>
		<form action="${pageContext.request.contextPath}/CalList.cal" id="search" name="search" method="post">
			<input type="hidden" name="calNowPage" id="nowPage" value="${vo.calNowPage }">
			<input type="hidden" name="ajaxFlag">
			<div id="cl-bottom">
				<select name="cal_search_name" id="cal_search_name" onchange="fnChange()">
					<option value="0">조회 조건</option>
					<option value="1">일정 명</option>
					<option value="2">일정 기간</option>
				</select>
				<input type="text" name="cal_search_title" id="cal_search_title" style="width: 150px" readonly="readonly" disabled="disabled" onkeyup="fnKeyEvent();">
				<input type="text" class="cal_date" name="cal_date_start" id="cal_date_start" style="width: 150px; display: none;" readonly="readonly" onchange="fnCD('sd')" placeholder="검색 시작일">
				<input type="text" class="cal_date" name="cal_date_end" id="cal_date_end" style="width: 150px; display: none;" readonly="readonly" onchange="fnCD('ed')" placeholder="검색 마지막일">
				<input type="button" value="조회" onclick="fnAjaxList('1')">
			</div>
		</form>
		<form id="view" name="view" method="post">
			<input type="hidden" name="cal_no" value="0">
			<input type="hidden" name="calNowPage" value="${vo.calNowPage }">
			<input type="hidden" name="cal_search_name" value="${vo.cal_search_name}">
			<input type="hidden" name="cal_search_title" value="${vo.cal_search_title}">
			<input type="hidden" name="cal_date_start" value="${vo.cal_date_start}">
			<input type="hidden" name="cal_date_end" value="${vo.cal_date_end}">
		</form>
	</div>
	<div>
		
	</div>
</body>
</html>